<template>
  <div class="articleDetails back-white">
    <div class="articleTopBar m-list list-justify">
      <div class="m-list-name">
        <span class="sTitle x-co3-5">文章详情</span>
      </div>
      <div class="m-list-inner">
        <el-button type="text" class="dib vam" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
      </div>
    </div>
    <el-container>
      <el-main>
        <div class="x-item x-item-none">
          <div class="articleDetails-container">
            <div class="articleDetails-aside x-fs-065">
              <p class="mb075"><span class="fw600 x-co3-4">标题: </span><span class="x-co1">{{detailInfo.title}}</span></p>
              <p class="mb075"><span class="fw600 x-co3-4">分类: </span><span v-if="detailInfo.tabs">{{detailInfo.tabs.title}}</span></p>
              <p class="mb075"><span class="fw600 x-co3-4">日期: </span><span class="">{{detailInfo.create_time}}</span></p>
              <div>
                <p class="x-fs-065 fw600 x-co3-4 mb05">封面图片: </p>
                <div class="imgBox">
                  <img :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/' + detailInfo.thumb" alt="">
                </div>
              </div>
            </div>
            <div class="articleDetails-content">
              <div class="readers x-fs-070 x-co3-4">
                <i class="el-icon-star-on"></i> <span class="mr075">收藏 {{detailInfo.collects.length}}</span>
                <i class="el-icon-view"></i> <span class="mr075">阅读 {{detailInfo.records.length}}</span>
                <i class="el-icon-share"></i> <span>分享 {{detailInfo.shares.length}}</span>
              </div>
              <div class="x-fs-070 x-co3-5 lh080 articleDetails-cbox" v-html="detailInfo.content"></div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>

  </div>
</template>
<script type="text/ecmascript-6">
  import {getDataDetail} from '../../api/api';
  export default{
    data(){
      return {
        articleId: this.$route.query.id, //文章id
        detailInfo: {}
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){
        let o = {
          "model": "Articles",
          "with":{
            "0":"tabs",
            "1":"records",
            "2":"collects",
            "3":"shares"
          },
          "condition": {
            "article_id": this.articleId
          }
        };
        getDataDetail(o).then((data) => {
          console.log(data);
          this.detailInfo = data.data.data;
          console.log(this.detailInfo)
        })
      }
    }
  }
</script>
<style>
  .articleTopBar{
    padding: 10px 25px;
    background: #f2f2f2;
  }
  .articleTopBar .sTitle{
    position: relative;
    font-size: 14px;
    padding-left: 15px;
  }
  .articleTopBar .sTitle:after{
    position: absolute;
    left:0;
    width: 2px;
    background: #989898;
    height: 18px;
    top: -4px;
    content: " "
  }
  .articleDetails-container{
    padding-left: 300px;
    position: relative;
    border: 1px solid #d9d9d9;
    min-height: 500px;
  }
  .articleDetails-aside{
    position: absolute;
    left: 0;
    top:0;
    width: 300px;
    height: 100%;
    border-right: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 50px 40px 0;
  }
  .articleDetails-content{
    width: 100%;
    padding: 10px 25px 30px;
  }
  .articleDetails-content .readers{
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 20px;
  }
  .articleDetails-cbox{
    white-space: pre-wrap;
  }
</style>
